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If you've been struggling to keep up with all the HTML tags I've been flinging 
at you over the last couple of days, you can breathe easier: things will be easier 
today. In fact, today you're going to learn very few new HTML tags. The focus 
for today is on adding images and color to your Web pages. In this chapter you'll 
learn about the HTML codes for adding images, color, and backgrounds, in 
particular: 

□ The kinds of images you can use in Web pages 

□ How to include images on your Web page, either alone or alongside 
text 

□ How to use images as clickable links 

□ Using external images as a substitute for or in addition to inline images 

□ Providing alternatives for browsers that cannot view images 

□ Image dimensions and scaling, and providing image previews 

□ Changing the font and background colors in your Web page 
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_j Using images for tiled page backgrounds 

□ How (and when) to use images in your Web Pages 
After this chapter you'll know all there is to adding images to your Web pages. Chapter 8, 
"Creating Images for the Web," will teach you about the tricks you can do with the images 
themselves to create different effects on your Web pages. 



Images for Web pages fall into two general classes: inline images and external images. Inline 
images appear directly on a Web page among the text and links and are loaded automatically 
when you load the page itself— assuming, of course, that you have a graphical browser and 
that you have automatic image-loading turned on. External images are images that are not 
directly displayed when you load a page. They are downloaded only at the request of your 
reader, usually on the other side of a link. External images don't need a graphical browser to 
be viewed— you can download an image file just fine using a text-only browser and then use 
an image editor or viewer to see that image later on. You'll learn about how to use both inline 
and external images in this chapter. 



Inline images appear on a Web page along with text and links, and are 
automatically loaded when the page itself is retrieved. 



External images are stored separate from the Web page and are loaded 
only on demand, for example, as the result of a link. 



Regardless of whether you're using inline or external images, those images must be in a 
specific format. For inline images, that image has to be in one of two formats: GIF or JPEG. 
GIF is actually the more popular standard, and more browsers can view inline GIF files than 
JPEG files. Support for JPEG is becoming more widespread but is still not as popular as GIF, 
and so sticking with GIF is the safest method of making sure your images can be viewed by 
the widest possible audience. You'll learn more about the difference between GIF and JPEG 
and how to create images in these formats in Chapter 8. You'll learn more about external 
images and the formats you can use for them later in this chapter. 

For this chapter, let's assume you already have an image you want to put on your Web page. 
HowdoyougetitintoGIForJPEG format so that your page can view it? Most image-edinng 



Using Images, Color, and Backgrounds 



programs such as Adobe Photoshop, Paint Shop Pro, CorelDRAW!, or XV provide ways to 
convert between image formats. You may have to look under an option for Save As or Export 
in order to find it. There are also freeware and shareware programs out there for most 
platforms that do nothing but convert between image formats. 

To save files in GIF format, you're looking for an option called CompuServe GIF, GIF87, 
GIF89 , or just plain GIF. Any of these will work. If you're saving your files as JPEG, usually 
the option will be simply JPEG. 

Remember how your HTML files had to have a .html or .htm extension for them to work 
properly? Image files have extensions, too. For GIF files, the extension is .gif . For JPEG files, 
the extension is either . jpg or . jpeg; either will work fine. 



Some image editors will try to save files with extensions in all caps 
(.GIF, .JPEG). Although these are the correct extensions, image names, 
like HTML file names, are case sensitive, and so GIF is not the same 
extension as gif. The case of the extension isn't important when you're 
testing on your local system, but it will be when you move your files to 
the server, so use lowercase if you possibly can. 
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After you have an image in GIF or JPEG format ready to go, you can include it in your Web 
page. Inline images are indicated in HTML using the <IMG> tag. The <IMG> tag, like the <HR> 
and <BR> tags, has no closing tag. It does, however, have many different attributes that allow 
different ways of presenting and handling inline images. Many of these attributes are newer 
extensions to HTML and may not be available in some browsers. I'll make note of those 
extensions as you learn about them. 

The most important attribute to the <IMG> tag is SRC. The SRC attribute indicates the filename 
or URL of the image you want to include, in quotes. The pathname to the file uses the same 
pathname rules as the HREF attribute in links. So, for a GIF file named image.gif in the 
same directory as this file, you can use the following tag: 

<IMG SRC= 'image. gif "> 

For an image file one directory up from the current directory, use 
<IMG SRC=\ . /image, gif ■> 



And so on, using the same rules as for page names in the HREF part of the <A> tag. 
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Let's try a simple example. Here's the Web page for a local haunted house that happens every 
year at Halloween. Using all the excellent advice IVe given you in the last six chapters, you 
should be able to create a page like this one pretty easily. Here's the HTML code for this 
HTML file, and Figure 7. 1 shows how it looks so far. 

<HTML> 
<HEAD> 

<TITLE>Welcome to the Halloween House of Terror</TlTLE> 
</HEAD><BODY> 

<H1>Welcome to The Halloween House of TerrorIK/H1> 
<HR> 

<P>Voted the most frightening haunted house three years in a row, the 

<STRONG>Halloween House of Ter ro r< / STR0NG> provides the ultimate in 

Halloween thrills. Over <STRONG>20 rooms of thrills and excitement</STRONG> to 

make your blood run cold and your hair stand on end!</P> 

<P>The Halloween House of Terror is open from <EM>0ctober 20 to November 

1st</EM>, with a gala celebration on Halloween night. Our hours are:</P> 

<UL> 

<LI>Mon-Fri 5PM-midnight 
<LI>Sat & Sun 5PM -3AM 

<LI><STRONG>Halloween Night (31 -oct)</STRONG>: 3PM-??? 
</UL> 

<P>The Halloween House of Terror is located at:<BR> 

The Old Waterfall Shopping Center<BR> 

1020 Mirabella Ave<BR> 

Springfield, CA 94532</P> 

</B00Y> 

</HTML> 
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The Halloween 
House home page. 
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Welcome to The Halloween House of Terror!! 



Voted the most frightening hamted boose three Tears tn a toxr, the HnSroetn Hoton cf Terror provides 
the uiimete in HaDovten thnSs. Over 20 rooms cf thjfb ardt tnftemtnt to make yoarbbod ran cold cud 
vom heir stand on end! 

The HefloTOO House of Tenor is open from October 20 to November ItX. vih a gab eekbrebon on 
HaQoxrwn nigh. Our horns an: 

o Mon-Fri -midnight 

oSa&Stm 5PM-3AM 

o HalhnmnMghipi-oct): 3PM-??? 

The Halbvren House of Tenor is bested a: 
The Old Waterfall Shopping Centex 
1020 Mirabella Ave 
Springfield, CA M532 
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So far, so good. Now, lets add an image to the page. I happen to have an image of a spider 
web kicking around in a clip an library (Figure 7.2) that would look excellent at the top of 
that Web page. 



The spider web 
image. 
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The image is called web . gif and is in GIF format, so it's ready to go into the Web page. Let's 
say we want to add it to this page on its own line so that the heading appears just below it. 
We'll add an <IMG> tag to the file inside its own paragraph, just before the heading. (Images, 
like links, don't define their own text elements, so the <IMG> tag has to go inside a paragraph 
or heading element.) 

<P><IMG SRO'web.gif "></P> 

<H1>Welcome to The Halloween House of Terror! !</H1> 

And now, when you reload the halloween . html page, your browser should include the spider 
web image in the page, as shown in Figure 7.3. 

If your image doesn't load (if your browser displays a funny-looking icon in its place), first 
make sure you've specified the name of the file properly in the HTML file. Image filenames 
are case-sensitive, so all the uppercase and lowercase letters have to be the same. 

If that doesn't work, double-check the image file to make sure that it is indeed a GIF or JPEG 
image, and that it has the proper file extension. 

Finally, make sure that you have image loading turned on in your browser. (The option is 
called Auto Load Images in both Netscape and Mosaic.) 

If one spider is good, two would be really good, right? Try adding another <IMG> tag next to 
the first one and see what happens: 

<P><IMG SRC="web.gif "><IMG SRC="web.gif *></P> 
<H1>Welcome to The Halloween House of Terror! !</H1> 
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Halbvtan night. Oar hottrs are: 

o Mon-Fri SPM-midiugDt . _ — ______ — — — 



Figure 7.4 shows how it looks in Netscape, with both images adjacent to each other, as you 
would expect. 
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yom hair stand on end) 

The HaBovwn House of Terror is open from Ocmtxr 2D to No«mi*r lu t vih a gala tsbbmion on 
Ha— veen night. Our hoars an: 

o Mon-Fri yM-nudmgb — — ■ 



And that's all there is to it! No matter what the image or how large or small it is, that's how 
A you include it on a Web page. 



Using Images, Color, and Backgrounds 



ta@g®§ ©find Tfej&t 

In the previous exercise we put an inline image on a page in its own separate paragraph, with 
text below the image. You can also include an image inside a line of text. (In fact, this is what 
the phrase "inline image" actually means— in a line of text.) 

To include images inside a line of text, just add the <IMG> tag at the appropriate point, inside 

an element tag (<H1> } <P>, <ADDRESS>, and so on): 

<H1><IMG SRC="web.gif ">The Halloween House of Terror! !</H1> 

So, for example, Figure 7.5 shows the difference that putting the image inline with the 
heading makes. (I've also shortened the tide itself.) 



jure 7.5. 

The Halloween 
House page with 
image inside the 
heading. 
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Voted the most frighten^ tamed hcrase Uuw ytm in a rov, the ReBmrnn Houm rf Tiror provides 
the ukimae in HeJbvwn thnDs. Orer 20 too mi of tfmlU db& exriteratnS to make your blood ran cold and 
your hair stand on end) 

The Heflovwn House of Terror » open from October 20 to November lu, wih a gala celebration on 
HeBovten night. Om horn are: 

o Mon-Fri 5?m -midnight 

o Sa & Son inn -SAM 

o HaDovetnMgtrf (10/31): 3pm-™ 



The image doesn't have to be large, and it doesn't have to be at the beginning of the text. You 
can include an image anywhere in a block of text: 
<BL0CKQU0TE> 

Love, from whom the world <IMG SRC= "world ,gif"> begun, <BR> 
Hath the secret of the sun. <IMG SRC='sun.gif "> <BR> 
Love can tell, and love alone, 

Whence the million stars <IMG SRC="star.gif "> were strewn <BR> 
Why each atom <IMG SRO'atom.gif "> knows its own. <BR> 
- -Robert Bridges 
</BL0CKGU0TE> 



Figure 7.6 shows how this looks. 



